<page-header title="理财配置" [breadcrumb]="breadcrumb" [back]="true">
    <ng-template #breadcrumb>
        <ql-breadcrumb>
            <ql-breadcrumb-item>理财规划</ql-breadcrumb-item>
            <ql-breadcrumb-item>精选理财规划</ql-breadcrumb-item>
            <ql-breadcrumb-item>理财配置</ql-breadcrumb-item>
        </ql-breadcrumb>
    </ng-template>
</page-header>

<page-container>
    <data-form [showReset]="false" [formGroup]="formGroup" (submit)="onRefresh()" submitText="生成配置列表">
        <!-- <ql-form-item label="客户姓名: ">
            <ql-input formControlName="customerName"></ql-input>
        </ql-form-item> -->
        <ql-form-item label="最低收益: ">
            <ql-input formControlName="profitFloor"></ql-input>
        </ql-form-item>
        <ql-form-item label="最高收益: ">
            <ql-input formControlName="profitCeiling"></ql-input>
        </ql-form-item>
        <ql-form-item label="风险等级: ">
            <ql-select placeholder="请选择" formControlName="riskLevelCode">
                <ql-option *ngFor="
            let item of [
              { key: 'R1', value: R1 },
              { key: 'R2', value: R2 },
              { key: 'R3', value: R3 },
              { key: 'R4', value: R4 }
            ]
          " [label]="item.key" [value]="item.value">
                </ql-option>
            </ql-select>
        </ql-form-item>
        <!-- <ql-form-item label="报酬: " formGroupName="assumption">
            <div class="row">
                <ql-input formControlName="start"></ql-input>
                <span>%</span>
                <div class="ql-padding-x">-</div>
                <ql-input formControlName="end"></ql-input>
                <span>%</span>
            </div>
        </ql-form-item> -->
    </data-form>

    <div *ngIf="assetslength != null">
        <ql-card class="ql-padding-x" header="配置列表">
            <data-table [model]="assetsList" [page]="pageService">
                <ql-table-column model-key="assetConfigId" label="理财配置id"></ql-table-column>
                <ql-table-column model-key="createUser" label="创建用户"></ql-table-column>
                <ql-table-column model-key="createTime" label="创建时间"></ql-table-column>
                <ql-table-column model-key="profitCeiling" label="最大收益"></ql-table-column>
                <ql-table-column model-key="profitFloor" label="最低收益"></ql-table-column>
                <ql-table-column label="操作" width="150">
                    <ng-template #slot let-scope="scope">
                        <ql-button type="text" (click)="queryAssets(scope)">查看资产</ql-button>
                    </ng-template>
                </ql-table-column>
            </data-table>
        </ql-card>
    </div>

    <div ql-row *ngIf="assetConfigure != null">
        <ql-card ql-row class="ql-padding-x" header="资产分析">
            <div>
                <div echarts [options]="assetConfigure"></div>
            </div>
        </ql-card>
        <ql-card ql-row class="ql-padding-x">
            <ng-template #header>
                <div class="clearfix">
                    <span style="line-height: 36px;">理财规划书</span>
                    <ql-button type="primary" style="float: right;">下载</ql-button>
                </div>
            </ng-template>
            <pdf-viewer [src]="pdfSrc" [render-text]="true" style="display: block;">
            </pdf-viewer>
        </ql-card>

    </div>
    <!-- <ng-template #empty>
        <div class="row middel-span center-span" style="height: 400px">
            暂无数据
        </div>
    </!-->
</page-container>
